<template>
    <div id="myheader">
        <div id="logo"><img @click="changestate" src="../assets/loginY123.gif" alt=""></div>
        <div id="title"><p>小羊驼餐饮管理系统</p></div>
        <el-color-picker @change=selectcolor size="mini" class="selectcolor" v-model='color'></el-color-picker>
        <div id="user1">
            <span>{{user.username}}</span>
            <span>欢迎您</span> 
            <el-tooltip class="item" effect="dark" content="退出登录" placement="bottom">
            <span class="el-icon-error" @click="open"></span>
            </el-tooltip>
        </div> 
        <el-dialog
            class="tankuang"
            width='400px'
            title="提示"
            :visible.sync="dialogVisible">
            <span>你确定要退出登录嘛</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="logout">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import storage from '../utils/storage.js'

export default {
    name:'myheader',
    data() {
        return {
            color:'#8db596',
            user:{},
            dialogVisible: false
        }

    },
    created() {
        this.getuser()
    },
    
    computed: {

       
    },
    methods: {
        open(){
            this.dialogVisible=true
            // sessionStorage.removeItem('user')
            // this.$router.push('/login')
        },
        logout(){
            
            sessionStorage.removeItem('user')
            this.$router.push('/login')
        },
        selectcolor(val){
            this.$store.dispatch('selectcolorActions',this.color)
        },
        changestate(){
            this.$store.dispatch('changestateActions')
        },
        getuser(){
           this.user=storage.getStorage('user')
           
            console.log(storage.getStorage('user'));
        }
    },
}
</script>

 <style lang="less" scoped>
    #title{
        margin-top: 30px;
    }
 
    .el-icon-error{
        cursor: pointer;
    }
    .bottom {
      clear: both;
      text-align: center;
    }

    .item {
      margin: 4px;
    }

    .left .el-tooltip__popper,
    .right .el-tooltip__popper {
      padding: 8px 10px;
    }
    #myheader{
        height: 100px;
        // line-height: 100px;
        #logo{
            float: left;
            height: 100%;
            img{
                height: 100%;
            }
        }
        div{
            float: left;
            font-size: 30px;
            color: #ECA89B;
        }
        .selectcolor{
            border-radius: 50%;
            float: right;
            margin-top: 36px;
        }
        #user1{
        margin-top: 38px;
        margin-right: 20px;
        float: right;
        font-size: 20px;
        color: wheat;
        font-family: "Helvetica Neue",sans-serif,Arial, Helvetica;
        }
        
    }



</style>